<template>
  <Card>
    <Row type="flex" justify="space-between">
      <Col span="20">
        <DatePicker
          @on-change="dataChange"
          ref="datetime"
          type="datetime"
          placeholder="Select date"
          format="yyyy-MM-dd HH:mm:ss"
          v-model="time"
          style="width: 200px"
        ></DatePicker>
      </Col>
      <Col span="2" align="right">
        <Button type="primary" @click="saveUI">新增</Button>
      </Col>
      <Col span="2" align="right">
        <Button type="error">删除全部</Button>
      </Col>
    </Row>
    <Table
      stripe
      :columns="columns"
      :loading="contentLoading"
      :data="currentList"
      style="margin-top:15px"
    ></Table>
    <br>
    <Page
      :total="page.total"
      :current="page.current"
      :page-size="page.size"
      show-elevator
      show-sizer
      show-total
      :page-size-opts="[1, 2, 3, 4]"
      placement="top"
      @on-change="getData"
      @on-page-size-change="nowPageSize"
    ></Page>
    <saveui
      :formObj="formObj"
      @handleConfirm="save1"
      :fileModal="isShow"
      :saveOrUpdate="saveOrUpdate"
      @handleCancel="isShow = false"
    ></saveui>
  </Card>
</template>
<script>

import { userList } from '@/api/sys/user'
import { page_minins } from '@/utils/page_minins'
import Saveui from './saveUI'

export default {
  components: {
    Saveui
  },
  mixins: [page_minins],
  data () {
    return {
      isShow: false, // 是否显示
      saveOrUpdate: 'save',
      formObj: null,
      time: "",
      editIndex: -1,
      editVal: '',
      page: {
        id: 2,
        username: 1
      },
      form: {
        name: '',
        bucketName: '',
        remark: '',
        id: -1
      },
      columns: [
        {
          align: 'center',
          width: 50,
          type: 'selection',
        },
        {
          title: '序号',
          align: 'center',
          width: 70,
          type: 'index'
        },
        {
          title: '姓名',
          key: 'name',
          render: (h, {row, index}) => {
            let edit;
            let control;
            if ( this.editIndex === index) {
              edit = [h('Input', {
                props: {
                  value: row.name
                },
                on: {
                  input: (val) => {
                    this.editVal = val
                  }
                }
              })]
              control = [h('Icon', {
                style: {
                  margin: '5px',
                  cursor: 'pointer'
                },
                props: {
                  type: 'md-checkmark',
                  size: 16,
                  color: '#19be6b'
                },
                on: {
                  click: () => {
                    this.currentList[index].name = this.editVal,
                    this.editIndex = -1
                  }
                }
              }),
              h('Icon', {
                style: {
                  margin: '9px',
                  cursor: 'pointer'
                },
                props: {
                  type: 'md-close',
                  size: 16,
                  color: '#f00'
                },
                on: {
                  click: () => {
                    this.editIndex = -1
                  }
                }
              })
              ]
            } else {
              edit = row.name
              control = [h('Icon', {
                style: {
                  cursor: 'pointer'
                },
                props: {
                  type: 'ios-create-outline',
                  size: 16
                },
                on: {
                  click: () => {
                    this.editIndex = index
                    this.editVal = row.name
                  }
                }
              })]
            }
            return h('Row', [
              h('Col', {
                props: {
                  span:13
                }
              }, edit),
              h('Col', {
                props: {
                  span:11
                }
              }, control)
            ])
          }
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '地址',
          key: 'address'
        },
        {
          title: '操作',
          key: 'handle',
          width: 150,
          align: 'center',
          handle: ['edit', 'delete'],
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '详情'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.delete(userList, params)
                  }
                }
              }, '删除')
            ]);
          }
        }
      ]
    }
  },
  mounted () {
    this.pageList(userList)
  },
  methods: {
    dataChange (time) {
      this.time = time
    },
    saveUI () {
      this.isShow = true
      this.saveOrUpdate = 'save'
    },
    save1 (formItem) {
      this.form = formItem
      this.isShow = false
    }
  },
  watch: {
    'time': function (nVal, oVal) {
      console.log(nVal)
    }
  }
}
</script>
